<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 内置的,不需要安装任何依赖 -->
    <button id="btn1">发起连接</button>
    <button id="btn2">发送消息</button>
    <button id="btn3">关闭连接</button>
    <script>
      const btn1 = document.querySelector("#btn1");
      const btn2 = document.querySelector("#btn2");
      const btn3 = document.querySelector("#btn3");
      let ws;
      // 点击按钮和服务器建立连接
      btn1.onclick = function() {
        // 1.创建webSocket,建立了与服务器地址的连接
        ws = new WebSocket("wss://echo.websocket.org");
        // 检验是否连接成功 onopen
        ws.onopen = function() {
          console.log("连接成功了");
        };
        // 接收信息
        ws.onmessage = function(e) {
          console.log(e.data); // 接收的服务的信息
        };
        // 监听关闭连接
        ws.onclose = function() {
          console.log("连接断开");
        };
      };
      // 点击按钮发送消息
      btn2.onclick = function() {
        // 发送信息
        ws.send("我爱你11111111");
      };
      btn3.onclick = function() {
        // 关闭连接
        ws.close();
      };

      // 创建连接  new WebSocket('服务器地址')
      // 监听是否连接成功 ws.onopen = fn
      // 发送 ws.send()
      // 接收消息 ws.onmessage = fn   e.data 是服务器发送信息
      // 关闭连接  ws.close()
      // 监听关闭连接  ws.onclose = fn
    </script>
  </body>
</html>
